<template lang="pug">
  .earlySchedule
    div.mb16.hiht
      img(src="@/assets/remind.png")
      p 温馨提示：时间易逝，已经流逝的时间不可再排课哦，请点击当前或未来的日期给宝宝们排课吧~
    .fullcalendar(v-loading="loading")
      FullCalendar(
        ref="calendarRef"
        :options="calendarOptions"
      )
    early-add(v-if="modalObj.type === 'add'" :visible.sync="modalObj.visible" :date="modalObj.date" @getList="refresh")
    early-info(v-if="modalObj.type === 'info'" :visible.sync="modalObj.visible" :course="modalObj.info" @getList="refresh")
</template>
<script>
import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

import { mapGetters } from 'vuex'
import Alert from '@/components/Basic/Alert'
import { formatTimestamp } from '@/utils/date'
import EarlyAdd from '../components/earlyAdd'
import earlyInfo from '../components/earlyInfo'
import { getEarlySchule } from '../api'

export default {
  components: {
    Alert,
    EarlyAdd,
    earlyInfo,
    FullCalendar
  },
  data () {
    return {
      loading: false,
      modalObj: {
        visible: true,
        date: '',
        info: {},
        type: ''
      },
      calendarOptions: {
        // height: 650,
        rerenderDelay: 2000,
        locale: 'zh-cn',
        isRTL: true,
        firstDay: '1', // 设置一周中显示的第一天是周几，周日是0，周一是1，以此类推
        weekNumberCalculation: 'ISO', // 与firstDay配套使用
        aspectRatio: 1.25, // 设置日历单元格宽高比
        selectEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认为true，允许
        schedulerLicenseKey: 'id',
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        buttonText: { today: '今天', month: '月视图', week: '周视图' },
        headerToolbar: { left: 'title', right: 'dayGridMonth,dayGridWeek today prev,next' },
        events: this.eventRender,
        eventColor: '#DA473A',
        dateClick: this.dateClick,
        eventClick: this.eventClick
      }
    }
  },
  computed: {
    ...mapGetters(['curArea'])
  },
  mounted () {
  },
  methods: {
    async refresh () {
      // await this.getPlanedByDate()
      this.$refs.calendarRef?.getApi().refetchEvents()
    },
    // 获取列表
    async getPlanedByDate (event) {
      const areaId = this.curArea.areaId
      const calendarApi = this.$refs.calendarRef?.getApi()
      if (areaId) {
        this.loading = true
        const currentStart = event ? event.start : calendarApi.view.currentStart
        const currentEnd = event ? event.end : calendarApi.view.currentEnd
        const params = {
          areaId,
          beginDate: formatTimestamp(currentStart, 'date'),
          endDate: formatTimestamp(currentEnd, 'date')
        }
        // const {currentStart,currentEnd} = calendarApi.view
        const res = await getEarlySchule(params)
        const plans = []
        for (let i = 0; i < res.length; i++) {
          const obj = {}
          obj.id = res[i].coursePlanClassesId
          obj.title = res[i].courseName
          obj.start = formatTimestamp(res[i].beginTime)
          obj.end = formatTimestamp(res[i].endTime)
          obj.allDay = false
          obj.info = res[i]
          plans.push(obj)
        }
        setTimeout(() => {
          this.loading = false
        }, 2000)
        return plans
      }
    },
    async eventRender (event, callback) {
      const plans = await this.getPlanedByDate(event)
      console.log(plans)
      callback(plans)
    },
    dateClick (date) {
      if (date.dateStr >= formatTimestamp(new Date(), 'date')) {
        this.modalObj = {
          visible: true,
          date: date.dateStr,
          info: {},
          type: 'add'
        }
      }
    },
    eventClick ({ el, event }) {
      console.log(el, event)
      this.modalObj = {
        visible: true,
        // date: date.dateStr,
        info: event._def.extendedProps.info,
        type: 'info'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.fullcalendar {
  ::v-deep {
    .fc-daygrid-day {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.9);
      text-align: right;
      font-style: normal;
      text-transform: none;
    }

    th .fc-scrollgrid-sync-inner {
      padding: 8px 16px;
      background: #F4F5FB !important;
      border-radius: 0px;
      border-bottom: 1px #E7E7E7 solid;
    }

    th {
      // border-right: 8px solid #fff !important;
      padding-right: 8px;
    }

    th:last-child {
      padding-right: 0 !important;
    }

    td {
      padding-right: 8px;
      box-sizing: content-box;
      padding-top: 8px;
    }

    .fc-daygrid-day .fc-day .fc-day-thu .fc-day-today {
      box-sizing: border-box !important;
    }

    td .fc-day-today {
      background: rgba(255, 139, 0, 0.1) !important;
      position: relative;
    }

    td .fc-day-today::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      width: 100%;
      height: 2px;
      background: #FF8B00;
    }

    .fc-theme-standard .fc-scrollgrid {
      border-width: 0;
    }

    .fc-theme-standard td,
    .fc-theme-standard th {
      border-width: 0;
    }

    .fc-button-group:nth-child(1) {
      background-color: #EEF1F4;
    }

    .fc-button-group {
      padding: 4px;
      background-color: transparent;

      .fc-button {
        background: #EEF1F4;
        border-color: #EEF1F4;
        color: #333;
        outline: none;
        box-shadow: none;

        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #666666;

        &.fc-button-active {
          background: #FFFFFF;
          border-color: #FFFFFF;
          color: rgba(0, 0, 0, 0.9);
          font-style: normal;
          text-transform: none;
        }
      }

      .fc-button:focus,
      .fc-button-primary:not(:disabled).fc-button-active:focus {
        box-shadow: none;
      }

      .fc-prev-button {
        margin-right: 4px;
      }
    }

    .fc-today-button {
      width: 80px;
      height: 32px;
      background: #FF8B00;
      border-radius: 4px;
      border-color: #FF8B00;
      opacity: 1;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      font-style: normal;
      text-transform: none;
    }

    .fc-daygrid-event-harness {
      font-size: 12px;
      background: #DA473A;
      color: #fff;
      margin-left: 5px;
      margin-right: 5px;
      border-radius: 5px;

      +.fc-daygrid-event-harness {
        margin-top: 5px !important
      }

      a.fc-event {
        display: block;

        >div {
          display: inline;

          &.fc-event-time {
            font-weight: bold;
          }

          &.fc-daygrid-event-dot {
            display: none;
          }
        }
      }

      .fc-daygrid-event {

        .fc-event-title {
          white-space: pre-wrap;
          line-height: 1.8;
          font-weight: normal;
          font-size: 13px;
        }
      }
    }
  }
}

.hiht {
  background: #FEFBEE;
  border-radius: 6px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  line-height: 0;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.9);
  font-style: normal;
  text-transform: none;

  img {
    margin-right: 8px;
  }
}
</style>
